<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="font/iconfont.css" />
		<link rel="stylesheet" href="css/product.css" />
	</head>
	<body>
		<!-- 头部 -->
		<header>
			<!-- 中间版心宽度导航 -->
			<div class="header">
				<!-- 左边 -->
				<a href="" class="logo"></a>
				
				<!-- 右边 -->
				<ul class="nav-r">
					<li class="welcome">欢迎，xiaoming</li>
					<li class="loginout">退出</li>
					<li class="login"><a>登录</a></li>
					<li class="register"><a href="register.html">注册</a></li>
					<li class="nav-line">|</li>
					<!-- 购物车 -->
					<li class="cart">
						<p>购物车</p>
						<!-- 子菜单 -->
						<div class="cart-subnav">
							<!-- 暂无商品, 没有商品，没有登录 -->
							<div class="cart-msg">你的购物车暂无商品...</div>
							<!-- 中间购物车商品 -->
							<ul class="cart-list">	
								<!-- <li class="goods">
									<a href=""><img src="img/goods.jpg" alt="" /></a>
									<div>
										<p>全棉插肩长袖T恤 | 百</p>
										<p>服装尺码:S;颜色:米白/黑;</p>
										<p>
											<span>数量：3件</span>
											<span>¥290.00</span>
											<span>¥390.00</span>
										</p>
									</div>
								</li> -->
							</ul>
							<!-- 按钮 -->
							<div class="cart-btn">快去抢购物良仓商品吧！</div>
						</div>
					</li>
					
					<li class="nav-line">|</li>
					<li class="message">
						<p>消息</p>
					</li>
					<li class="nav-line">|</li>
					<li class="add-product"><a href="">添加良品</a></li>
					<li class="agreement"><a href="">资质证照 / 协议规则</a></li>
				</ul>
			</div>
		</header>
		
		<!-- 导航 -->
		<nav>
			<ul>
				<li><a href="">首页</a></li>
				<li>
					<a href="">商店</a>
					<!-- 子菜单 -->
					<div class="nav-subnav">
						<ul class="nav-list">
							<!-- js操作数据添加 -->
							<!-- <li>
								<a href="">
									<img src="img/nav_icon.png" alt="" />
									<p>家居</p>
								</a>
							</li> -->
							
						</ul>
						<div class="nav-subnav-r">
							<img src="img/nav_banner.jpg" alt="" />
							<p>新视线：  2024年12月刊</p>
						</div>
						
					</div>
				</li>
				<li><a href="">杂志</a></li>
				<li><a href="">分享</a></li>
				<li><a href="">达人</a></li>
				<li><a href="">有偿资讯</a></li>
			</ul>
			
			<!-- 搜索框 -->
			<div class="search-content">
				<input type="text" placeholder="search..." name="" id="">
				<span></span>
			</div>
		</nav>
		
		<!-- 面包导航 -->
		<div class="breadcrumb-content">
			<a href="index.html">首页</a><span>&gt;</span>
			<a href="index.html">商店</a><span>&gt;</span>
			<a href="" class="now-breadcrumb">家居</a>
		</div>
		
		<!-- 商品 -->
		<div class="goods-content">
			<!-- 左边 -->
			<div class="goods-left">
				<!-- 上 -->
				<div class="goods-product">
					<!-- 放大镜 zoom-->
					<div class="product-left">
						
						<!-- up 鼠标移入移出-->
						<div class="zoom-up">
							<img class="small-img" src="img/product_goods.jpg" alt="">
							<div class="slide"></div>
							<!-- 右边大图 -->
							<div class="zoom-big">
								<img class="big-img" src="img/product_goods.jpg" alt="" />
							</div>
						</div>
						<!-- down -->
						<div class="zoom-down">
							<a href="javascript:;" class="prev"></a>
							<a href="javascript:;" class="next"></a>
							<div class="list-content">
								<ul class="zoom-down-list">
									<!-- <li><img src="img/product_goods.jpg" alt="" /></li>
									<li><img src="img/product_goods.jpg" alt="" /></li>
									<li><img src="img/product_goods.jpg" alt="" /></li>
									<li><img src="img/product_goods.jpg" alt="" /></li>
									<li><img src="img/product_goods.jpg" alt="" /></li> -->
								</ul>
							</div>
						</div>
					</div>
					
					<!-- 商品名称数据 -->
					<div class="product-right">
						<!-- <p class="start"><span class="iconfont icon-aixin_shixin"></span><span>5</span></p>
						<p class="brand">品牌一名</p>
						<p class="goods-name">商品名</p>
						<p class="price"><span>价格:</span><span></span></p>
						<p>免运费</p>
						<p>统一使用轮播图片渲染</p>
						<p>数量<button>减</button><input /><button>加</button></p>
						<button>立即购买</button>
						<button>加入购物车</button> -->
					</div>
				</div>
				
				<!-- 下 -->
				<div class="goods-detail">
					<div class="detail-img">
						
					</div>
					<!-- 下面 品牌介绍 -->
				</div>
				
			</div>
			
			
			
			
			<!-- 右边猜你喜欢 -->
			<div class="goods-right">
				
			</div>
		</div>
	
		
		
		
		
		<!-- 底部 -->
		<div class="server-content">
			<!-- 版心宽度 -->
			<div class="bottom-server">
				<span class="iconfont icon-shouzhi"></span>
				<span>&gt;&gt;</span>
				<a href="">良仓商品/OUR SHOP</a>
			</div>
		</div>
		
		
		
		<!-- 返回顶部按钮 -->
		<div class="back-top"></div>
		
	</body>
</html>
<!-- 引入 wj  base index-->
<script src="js/wj.js"></script>
<script src="js/base.js"></script>
<script src="js/product.js"></script>